<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>分类管理</title>
	<link rel="stylesheet" href="../EasyUI-1.5.3/themes/default/easyui.css">
    <link rel="stylesheet" href="../css/icon.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" type="text/css" href="../css/cate.css">
    <script src="../js/jquery-1.8.0.min.js"></script>
    <script src="../EasyUI-1.5.3/jquery.min.js"></script>
    <script src="../EasyUI-1.5.3/jquery.easyui.min.js" ></script>
    <script src="../EasyUI-1.5.3/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
</head>
<body>
     <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',split:true" title="目录" style="width:200px;">
            <ul id="tt"></ul>
        </div>
        <div class="cate-box" data-options="region:'center',title:'分类操作',iconCls:'icon-anchor'">

                <div class="xu-toolbar-button">
                    <a href="#" class="easyui-linkbutton cate-toolbar" iconCls="icon-add" onclick="addRootNode()" plain="true">添加根节点</a>
                    <a href="#" class="easyui-linkbutton cate-toolbar" iconCls="icon-add1" onclick="addRootNodeChilden()" plain="true">添加子节点</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="editNode()" plain="true">修改</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="remove()" plain="true">删除</a>
                </div>
                <form id="ff" class="easyui-form cate-form" method="post" data-options="novalidate:true">
                    <div>
                        根节点名称:<input type="text" onfocus='this.blur()' name="parentId" id="parentId" style="margin-left: 20px" />
                    </div>
                    <!-- <input class="easyui-textbox" data-options="label:' 根节点名称:'" name="parentId" id="parentId"> -->
                    <div style="margin-top:15px;">
                        <input class="easyui-textbox" name="text" style="width:100%;" data-options="label:'分类名称:',required:true">
                    </div>
                </form>
                  <div style="text-align:center;padding:5px 0">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px;margin:20px;">Submit</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
                </div>
        </div>
    </div>
    
    <script>
        var nodeId = null;
        var nodeName = null;
        var bstop = false;
        $('#tt').tree({//引入tree
            animate:true,
            url:'http://localhost:3000/cate/list',
            method:'get',
            onClick: function(node){
                $("#parentId").val(node._id);
            }
        });

        //移除
        function remove(){
            var node = $('#tt').tree('getSelected');//获取选中的
            var id = node._id;

            $.ajax({
                type:"delete",
                url:"http://localhost:3000/cate/data/"+id
            }).then(function(res){
                $("#tt").tree('reload');
            });
        }

        function addRootNode(){
            $("#parentId").val(null);
            nodeId = null;
        }

        //添加子节点
        function addRootNodeChilden(){
            bstop = true;
        }

        //修改
        function editNode(){
            var node = $('#tt').tree('getSelected');
            nodeId = node._id;

            console.log(nodeId)
            $("#ff").form('load',node);
        }
        function submitForm(){
            $('#ff').form('submit',{
                onSubmit:function(){
                    if($(this).form('enableValidation').form('validate')){
                        // 如果nodeId存在，不为null，那么，表单提交就是提交到修改的地址，
                        // 否则，则是新增
                        var postUrl;
                        if(nodeId!==null){
                            // edit
                            console.log($("#parentId").val());
                             postUrl = 'http://localhost:3000/cate/data/' + nodeId;
                        }else if(bstop){
                            // add
                             postUrl = 'http://localhost:3000/cate/data';
                        }
                        var formData = $('#ff').serializeJSON();
                        if(formData.parentId.length === 0){
                            delete formData.parentId;
                        }
                        console.log(postUrl,formData)
                        $.ajax({
                            type:"post",
                            url:postUrl,
                            data: formData
                        }).then(function(res){
                            $("#tt").tree('reload');
                            clearForm();
                        })
                    }else{
                        alert('表单验证失败');
                        clearForm();
                    }
                }
            },()=>{
                alert('text');
            });
        }
        function clearForm(){
            $('#ff').form('clear');
            $("#parentId").val(null);
        }
    </script>
</body>
</html>